<template>
  <div>
    <MyHeader background="#1d7bff" title="购物车案例"></MyHeader>
    <!-- 1.解决脱离标准里上下导航栏盖住了商品 -->
    <div class="main">
      <!-- 4.2循环组件并且把数据传递给子页面 -->
      <MyGoods v-for="obj in list" :key="obj.key" :goodObj="obj"></MyGoods>
      </div>

    <MyFooter @changeAll='allFn' :arr='list'></MyFooter>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'

import MyFooter from './components/MyFooter.vue'
export default {
  components: {
    MyHeader,
    MyFooter,
    MyGoods,
  },
  //3.4--发起接口请求
  //4.目标：数据铺设到MyGoods组件上
  //4.1 把后台拿到的数据给list:[]
  data(){
    return{
      list:[]
    }
  },
  created() {
    this.$axios({
      url: '/api/cart',
      method: 'GET', // 默认就是GET方式请求, 可以省略不写
    }).then(res=>{
      const {data:{list}}=res
      this.list=list
      console.log(list);
    })
  },
  methods:{
    allFn(bool){
      this.list.forEach(item=>{
       item.goods_state=bool
      })
    }
  }
}
</script>

<style scoped>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
